import {computed, designComponent, inject, onBeforeUnmount, onMounted, provide, reactive, watch} from 'plain-ui-composition'
import {iVisualData} from 'react-cms-visual-editor/src/packages/utils/types.base'
import {createCmsPreview} from "react-cms-visual-editor";
import 'react-cms-visual-editor/src/libs/icon/iconfont.css'
import {PropType} from "vue";
import {createReactivityApi} from "react-cms-visual-editor/src/packages/utils/createReactivityApi";
import {useActionRender} from "./processActionRender";

export const CmsPreviewApp = designComponent({
    props: {
        data: {type: Object as PropType<iVisualData>}
    },
    setup({props}) {
        const router = useRouter()
        const reactivityApi = createReactivityApi({reactive, computed, type: 'vue', designComponent, onMounted, onBeforeUnmount, watch, provide, inject})
        const processActionRender = useActionRender(router)
        const CmsPreview = createCmsPreview({api: reactivityApi, processActionRender})

        return () => (
            !!props.data && <>
                <CmsPreview data={props.data}/>
            </>
        )
    },
})
